<template>
	<div class="bg">
		<div class="header">
			<div class="logoSection">
				<!-- <div class="headerLogo"></div> -->
				<div class="headerTitle">视讯管理</div>
			</div>
			<div class="menuSection">
				<a-button type="primary" icon="play-square" :class="playMode == 'live'?'btnSelected':''" @click="playModeChange('live')">实时监看</a-button>
				<a-button type="primary" icon="video-camera" :class="playMode == 'record'?'btnSelected':''" @click="playModeChange('record')">录像监看</a-button>
				<a-dropdown v-if="false" placement="bottomCenter">
					<a-button type="primary" icon="folder-open">{{ playMode == 'live'? '实时' : playMode == 'record'? '录像' : '监看'}}设置</a-button>
					<a-menu slot="overlay" theme="dark">
						<a-menu-item-group v-if="playMode=='live'">
							<a-menu-item key="setting:1">
								保存实时多画面存档
							</a-menu-item>
							<a-menu-item key="setting:2">
								加载实时多画面存档
							</a-menu-item>
						</a-menu-item-group>
						<a-menu-item-group v-if="playMode=='record'">
							<a-menu-item key="setting:1">
								保存录像多画面存档
							</a-menu-item>
							<a-menu-item key="setting:2">
								加载录像多画面存档
							</a-menu-item>
						</a-menu-item-group>
					</a-menu>
				</a-dropdown>
				<a-dropdown placement="bottomCenter">
					<a-button type="primary" icon="layout">界面设置</a-button> <!--interaction-->
					<a-menu slot="overlay" theme="light">
						<a-sub-menu key="sub1">
							<span slot="title">底边</span>
							<a-menu-item @click="()=>showFooter = true">
								显示<a-icon v-if="showFooter" type="check" />
							</a-menu-item>
							<a-menu-item @click="()=>showFooter = false">
								隐藏<a-icon v-if="!showFooter" type="check" />
							</a-menu-item>
						</a-sub-menu>
						<a-sub-menu key="sub2">
							<span slot="title">右侧工具栏</span>
							<a-menu-item @click="()=>showTool = true">
								显示<a-icon v-if="showTool" type="check" />
							</a-menu-item>
							<a-menu-item @click="()=>showTool = false">
								隐藏<a-icon v-if="!showTool" type="check" />
							</a-menu-item>
						</a-sub-menu>
						<a-sub-menu key="sub3">
							<span slot="title">云台控制</span>
							<a-menu-item  @click="()=>showPtz = true">
								显示<a-icon v-if="showPtz" type="check" />
							</a-menu-item>
							<a-menu-item @click="()=>showPtz = false">
								隐藏<a-icon v-if="!showPtz" type="check" />
							</a-menu-item>
						</a-sub-menu>
						<a-sub-menu key="sub4">
							<span slot="title">播放器标题栏</span>
							<a-menu-item  @click="()=>showPlayerHeader = true">
								显示<a-icon v-if="showPlayerHeader" type="check" />
							</a-menu-item>
							<a-menu-item @click="()=>showPlayerHeader = false">
								隐藏<a-icon v-if="!showPlayerHeader" type="check" />
							</a-menu-item>
						</a-sub-menu>
					</a-menu>
				</a-dropdown>
			</div>
			<div class="systemConfig" ref="test" >
				<!-- <a-tooltip placement="top">
					<template slot="title">
						<span>grid1</span>
					</template>
					<div class="iconContain iconsize grid1"></div>
				</a-tooltip> -->
				<div class="iconContain iconsize grid1" @click="()=>{rowNum = 1;updateLayoutView()}"></div>
				<div class="iconContain iconsize grid2" @click="()=>{rowNum = 2;updateLayoutView()}"></div>
				<div class="iconContain iconsize grid3" @click="()=>{rowNum = 3;updateLayoutView()}"></div>
				<div style="width: 80px;float: left;margin-left: 5px">
					<a-select v-model="rowNum" placeholder="请选择行数" @change="updateLayoutView">
						<a-select-option
							:value="item"
							v-for="item in 4"
							:key="item"
						>{{ item + '*' + item + '屏' }}</a-select-option>
					</a-select>
				</div>
				<div :class="'iconContain iconsize '+ (allPause() ? 'playerplay': 'playerpause') + ''" @click="allPlayPause"></div>
				<div class="iconContain iconsize playerstop" @click="allPlayerStop"></div>
				<div :class="'iconContain iconsize '+ (allVolumeMute() ? 'mutevolume': 'unmutevolume') + ''" @click="allVolumeControl"></div>
				<div class="iconContain iconsize mulifull" @click="fullscreenClick"></div>
				<!-- <a-tooltip placement="top">
					<template slot="title">
						<span>截屏1</span><br/>
						<span>截屏2</span><br/>
						<span>截屏3</span>
					</template>
					<div class="iconContain">
						<a-icon type="camera" class="iconsize" style="margin-top: 3px;"/>
					</div>
				</a-tooltip> -->
				<div style="float: left;margin-left: 5px;">
					<a class="logout_title" @click="handleLogout" style="font-size: 18px;">
						<a-icon type="logout" />
						<span>退出登录</span>
					</a>
				</div>
			</div>
		</div>
		<div class="center" style="display: flex;" :style="'bottom: ' + (showFooter?30:0) + 'px;'">
			<div id="layoutContain" class="showArea" :style="'width: calc(100% - ' + (showTool?300:0) + 'px); height:100%; background-color:#383d41;'">
				<div v-if="false" id="content">
					<grid-layout
						ref="gridlayout"
						:layout.sync="layout"
						:col-num="colNum"
						:max-rows="rowNum"
						:row-height="rowHeight"
						:is-draggable="draggable"
						:is-resizable="resizable"
						:vertical-compact="true"
						:margin="[borderWidth, borderWidth]"
						:prevent-collision="preventCollision"
						:use-css-transforms="true"
						:style="'height:' + this.layoutHeight + 'px'"
						@layout-updated="layoutUpdatedEvent"
					>
						<div :style="'width:100%;height:100%;position: absolute;border:' + borderWidth +'px solid black;'">
							<!-- <div style=""></div> -->
							<!-- 4*4*2， -->
							<!-- 先画横线，再画竖线 -->
							<div v-for="i in (rowNum-1)" :key="'row'+i" :style="'width:100%;height:0;position: absolute;top:'+ (rowHeight * i + borderWidth * (i-1) ) +'px;border-bottom:' + (borderWidth==0?1:borderWidth) +'px '+ ((true) ? 'solid black;' : 'dashed gray;')"></div>
							<div v-for="i in (colNum-1)" :key="'col'+i" :style="'width:0;height:100%;position: absolute;left:'+ (rowWidth * i + borderWidth * (i-1) ) +'px;border-right:' + (borderWidth==0?1:borderWidth) +'px '+ ((true) ? 'solid black;' : 'dashed gray;')"></div>
							
						</div>
						<!-- <grid-item class="itemcontent" :name="item.i" :key="item.i" v-for="item in layout" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i" drag-ignore-from=".text" drag-allow-from=".remove"> -->
						<grid-item class="itemcontent" :name="item.i" :key="item.i" v-for="item in layout" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i" @resized="resizedEvent" drag-ignore-from=".remove">
							<!-- <span class="text">{{ item.i + ':' + item.pName }}</span> -->
							<div style="width: 100%;height: 100%;background-color: red;">
								<!-- <img v-if="item.iconUrl" :src="item.iconUrl" alt="" :style="'position:absolute;top:50%;left:50%;width:' + parseInt(iconWidth(item) * 0.8) + 'px;height:' + parseInt(iconWidth(item) * 0.8 * (item.isTime ? 1 : 0.6)) + 'px;margin-left:' + ( -1 * parseInt(iconWidth(item) * 0.8) * 0.5 )+ 'px;margin-top:' + ( -1 * parseInt(iconWidth(item) * 0.8 * (item.isTime ? 1 : 0.6)) * 0.5 ) + 'px;'"> -->
								<!-- <div :style="'position:absolute;top:75%;height: 25%;width: 100%;text-align: center;font-size: ' + parseInt(iconWidth(item)/100*14)   +'px;'">{{ item.pName }}</div> -->
							</div>
							<a-icon class="remove" @click="removeItem(item.i)" type="close-circle" />
						</grid-item>
					</grid-layout>
				</div>
				<div v-for="i in rowNum * rowNum" :key="i" :name="i" class="playerContain" v-show="!hasFull || (hasFull && urlList[i-1].isFull )" :style="playContainStyle(urlList[i-1],i-1)">
					<div v-if="playMode=='live'" :style="'width: 100%;height: 100%;'+ (selectNum == i ? 'box-shadow: 0 0 2px 2px #1597e3;' : '') +''" @click="playerSelected(urlList[i-1],i)">
						<div v-if="showPlayerHeader" class="playerHeader">{{ urlList[i-1].playerHeaderText }}{{ urlList[i-1].playerStatusText }}</div>
						<Player
							:style="'width: 100%;height: calc(100% - ' + (showPlayerHeader?20:0) + 'px);'"
							:ref="'player' + i"
							:urlOption="urlList[i-1].urlOption"
							:item="urlList[i-1]"
						></Player>
						<div v-if="urlList[i-1].status == 'delete' || urlList[i-1].status == 'unused' || urlList[i-1].status == 'offline'" :style="'position: absolute;left:0;bottom:0;width: ' + rowWidth + 'px;height: ' + rowHeight + 'px;background-color: rgba(255,0,0,0.1);'">
							<a-icon v-if="urlList[i-1].status == 'delete'" type="delete"  :style="'width:100%;top: 30%;position: absolute;font-size: ' + (rowHeight/3) + 'px;color:#e10602'"/>
							<a-icon v-if="urlList[i-1].status == 'unused'" type="stop"  :style="'width:100%;top: 30%;position: absolute;font-size: ' + (rowHeight/3) + 'px;color:#e10602'"/>
							<a-icon v-if="urlList[i-1].status == 'offline'" type="disconnect"  :style="'width:100%;top: 30%;position: absolute;font-size: ' + (rowHeight/3) + 'px;color:#e10602'"/>
						</div>
					</div>
					<div v-if="playMode=='record'" style="width: 100%;height: 100%;">
						<div v-if="showPlayerHeader" class="playerHeader">{{ urlList[i-1].playerHeaderText }}</div>
						<Player
							:style="'width: 100%;height: calc(100% - ' + (showPlayerHeader?20:0) + 'px);'"
							:ref="'player' + i"
							:urlOption="urlList[i-1].urlOption"
							:item="urlList[i-1]"
						></Player>
					</div>
				</div>
			</div>
			<div v-if="showTool" class="tool" style="min-width: 300px;width:300px;height:100%;border-left: 2px solid #111111;display: flex;flex-direction: column;">
				<div v-if="playMode == 'live'" style="width:100%;height:100%;">
					<div :style="'height: calc(100% - ' + (showPtz?450:0) + 'px);width: 100%;background-color: #252f2e;'">
						<a-tree v-if="false" :tree-data="treeData" show-icon default-expand-all :default-selected-keys="['0-0-0']" @select="onSelect"
								draggable
								@dragend="onDragend">
							<a-icon slot="switcherIcon" type="down" />
							<a-icon slot="camera" type="video-camera" theme="filled"/>
							<a-icon slot="environment" type="environment" theme="filled"/>
							<!-- <a-icon slot="meh" type="smile-o" /> -->
							<!-- <template slot="custom" slot-scope="{ selected }">
								<a-icon :type="selected ? 'frown' : 'smile-o'" />
							</template> -->
						</a-tree>
						<el-tree
							:data="treeDataEL"
							default-expand-all
							draggable
							:allow-drag="handle_node_allow_drag"
							:allow-drop="handle_node_allow_drop"
							@node-drag-end="handle_node_drag_end"
							style="height: 100%;"
						>
							<span class="custom-tree-node" slot-scope="{ node, data }" :style="'color:' + (cameraEnable(data) ? '#dddddd' : 'gray')  + ''">
								<span v-if="node.label">{{ node.label + (data.domainType == '2' ? (data.state == '2' ? '(下线)' : data.state == '3' ? '(禁用)' : '') : '') }}</span>
								<span v-else>{{ data.name + (data.used == '0'?'(禁用)':(data.online == '0' ? '(离线)' :''))}}</span>
								<span v-if="!data.children" style="position: absolute;right: 10px;min-width: 20px;height: 20px;">
									
									<!-- <a-icon v-if="data.used == '0'" type="stop"></a-icon>
									<a-icon v-else type="check-circle"></a-icon>
									
									<a-icon v-if="data.online == '0'" type="disconnect"></a-icon>
									<a-icon v-else type="global"></a-icon>
									
									<a-tooltip placement="top">
										<template slot="title">
											<span class="ratevalue">摄像机参数</span>
										</template>
										<a-icon type="info-circle"></a-icon>
									</a-tooltip> -->
									
									<a-icon v-if="data.used == '0'" type="stop" style="margin-right: 3px;"></a-icon>
									<a-icon v-if="data.used != '0' && data.online == '0'" type="disconnect" style="margin-right: 3px;"></a-icon>
									<a-icon v-if="data.used != '0' && data.online != '0'" type="check-circle" style="margin-right: 3px;"></a-icon>
									
									
									<a-tooltip placement="top">
										<template v-if="cameraEnable(data)" slot="title">
											<span class="ratevalue">{{ data.recordState == 'loading' ? '设置中' : data.recordState ? '正在录像' : '设置快速录像' }}</span>
										</template>
										<a-icon v-if="data.recordState == 'loading'" type="loading" />
										<a-icon v-if="data.recordState == true" type="video-camera" theme="filled"></a-icon>
										<a-icon v-if="data.recordState == false && cameraEnable(data)" type="video-camera" theme="outlined" @click="quickRecord(data)"></a-icon>
										<a-icon v-if="data.recordState == false && !cameraEnable(data)" type="video-camera" theme="outlined"></a-icon>
									</a-tooltip>
									
								</span>
							</span>
						</el-tree>
					</div>
					<pan-tilt ref="ptz" v-if="showPtz" :selectItem="selectItem" :ptzEnable="ptzEnable" :style="'height: ' + (showPtz?450:0) + 'px;width: 100%;background-color: #252f2e;'"></pan-tilt>
				</div>
				<div v-if="playMode == 'record'" style="width:100%;height:100%;">
					<div style="height: calc(100% - 0px);width: 100%;background-color: #252f2e;">
						<a-collapse :bordered="false" v-model="activeKey">
							<a-collapse-panel key="1" header="录像筛选">
								<a-form layout="inline" @keyup.enter.native="searchQuery">
									<a-row :gutter="24">
										<a-col :md="24" :sm="24">
											<a-form-item label="请选择域" :labelCol="{span: 5}" :wrapperCol="{span: 16, offset: 1}">
												<a-select v-model="queryParam.regionId" placeholder="请选择域" @change="areaChoose">
													<a-select-option
														:value="item.serverGBId"
														v-for="item in areaList"
														:key="item.serverGBId"
														:disabled="item.domainType != '1' && item.state != '1'"
													>{{ item.domainType == '1'? '本' : item.domainType == '2' ? '外' : ''}}-
													{{ item.name }}-
													{{ item.relation == '1'? '下级' : item.domainType == '2' ? '互联' : '' }}
													{{ item.state == '1' ? '在线' : item.state == '2' ? '下线' : item.state == '3' ? '禁用' : '' }}
													</a-select-option>
												</a-select>
											</a-form-item>
										</a-col>
										<a-col :md="24" :sm="24">
											<a-form-item label="类别" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">
												<a-radio-group v-model="queryParam.type">
													<a-radio-button value="camera">摄像机</a-radio-button>
													<a-radio-button value="task">任务</a-radio-button>
												</a-radio-group>
											</a-form-item>
										</a-col>
										<a-col v-if="queryParam.type == 'camera'" :md="24" :sm="24">
											<a-form-item label="摄像机名" :labelCol="{span: 5}" :wrapperCol="{span: 16, offset: 1}">
												<a-input placeholder="请输入摄像机查询" v-model="queryParam.cameraName"></a-input>
											</a-form-item>
										</a-col>
										<a-col v-if="queryParam.type == 'task'" :md="24" :sm="24">
											<a-form-item label="任务名称" :labelCol="{span: 5}" :wrapperCol="{span: 16, offset: 1}">
												<a-input placeholder="请输入任务查询" v-model="queryParam.taskName"></a-input>
											</a-form-item>
										</a-col>
										<a-col :md="24" :sm="24">
											<a-form-item label="开始时间:" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">
												<a-date-picker
													v-model="startValue"
													:disabled-date="disabledStartDate"
													show-time
													:allowClear="false"
													format="YYYY-MM-DD HH:mm:ss"
													placeholder="Start"
													@openChange="handleStartOpenChange"
												/>
											</a-form-item>
										</a-col>
										<a-col :md="24" :sm="24">
											<a-form-item label="结束时间:" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">
												<a-date-picker
													v-model="endValue"
													:disabled-date="disabledEndDate"
													show-time
													:allowClear="false"
													format="YYYY-MM-DD HH:mm:ss"
													placeholder="End"
													:open="endOpen"
													@openChange="handleEndOpenChange"
												/>
											</a-form-item>
										</a-col>
										<a-col :md="24" :sm="24">
											<div style="margin-left: 100px;">
												<button class="btn" @click="searchQuery" style="width: 70px;height: 35px;line-height: 30px;border-radius: 5px;"><span>查询</span></button>
												<button class="btn" @click="searchReset" style="width: 70px;height: 35px;line-height: 30px;border-radius: 5px;"><span>重置</span></button>
											</div>
											
											<!-- <a-button type="primary" @click="searchQuery">查询</a-button>
											<a-button type="primary" style="margin-left: 8px" @click="searchReset">重置</a-button> -->
										</a-col>
									</a-row>
								</a-form>
							</a-collapse-panel>
						</a-collapse>
						<a-table
							ref="table"
							size="small"
							rowKey="fileLogId"
							:columns="columns"
							:dataSource="dataSource"
							:pagination="ipagination"
							:loading="loading"
							@change="handleTableChange"
							:style="'width:100%;height: calc(100% - 47px - ' + (activeKey && activeKey.length ? 247 : 0) + 'px);overflow-y:auto'">
							
							
							<div slot="taskName" slot-scope="text, record" draggable @dragend="recordDragend" :record="JSON.stringify(record)">
								<div style="user-select: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 234px;">{{ queryParam.type == 'task' ? (record.taskName + ' / ' + record.cameraName) : (record.cameraName + ' / ' + record.taskName) }}</div>
								<div style="user-select: none;">{{ moment(record.startDateTime).format('MM-DD HH:mm:ss') + ' / ' + moment(record.endDateTime).format('MM-DD HH:mm:ss') }}</div>
								<Download v-if="record.showDownload" :record="record" style="user-select: none; max-width: 234px;"></Download>
							</div>
							
							<span slot="action" slot-scope="text,record">
								<a @click="downLoadRecord(record)">{{ record.showDownload ? '取消下载' : '下载'}}</a>
							</span>
						
						
						</a-table>
					</div>
					
				</div>
			</div>
		</div>
		<div v-if="showFooter" class="footer">
			<span style="margin-left: 10px;">用户:{{ userInfo().realName }} | 登陆时间:{{ loginTime }} | 当前视图:{{ colNum + '*' + rowNum }}画面</span>
			<!-- <a-slider id="test" :default-value="30" /> -->
		</div>
		
	</div>
</template>

<script>
import elementResizeDetectorMaker from "element-resize-detector";
import VueGridLayout from 'vue-grid-layout';
import Vue from 'vue'
import eventBus from "../../components/eventBus.js"
import { USER_INFO } from "@/store/mutation-types"
import { mapActions, mapGetters,mapState } from 'vuex'
import Player from './Player.vue'
import PanTilt from './PanTilt.vue'
import { getAction, postAction } from '@/api/manage'
import mqtt from 'mqtt'
import { addQuickRecord, getPlatformList, otheRegionRecordUrl } from '@/api/api'
// import pick from 'lodash.pick';
import moment from 'moment';
// import { ACCESS_TOKEN } from '@/store/mutation-types';
// import Vue from 'vue';
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import Download from './Download.vue'
const treeData = [
	{
		title: '地铁南站',
		key: '0-0',
		slots: {
			icon: 'environment',
		},
		children: [
			{ title: '1001地铁南站A出口', key: '0-0-0', slots: { icon: 'camera' } },
			{ title: '1002地铁南站A出口', key: '0-0-1', slots: { icon: 'camera' } },
			{ title: '1003地铁南站A出口', key: '0-0-2', slots: { icon: 'camera' } },
			{ title: '1004地铁南站A出口', key: '0-0-3', slots: { icon: 'camera' } },
			{ title: '1005地铁南站A出口', key: '0-0-4', slots: { icon: 'camera' } },
			{ title: '1006地铁南站A出口', key: '0-0-5', slots: { icon: 'camera' } },
		],
	},
	{
		title: '地铁北站',
		key: '0-1',
		slots: {
			icon: 'environment',
		},
		children: [
			{ title: '1001地铁北站A出口', key: '0-1-0', slots: { icon: 'camera' } },
			{ title: '1002地铁北站A出口', key: '0-1-1', slots: { icon: 'camera' } },
			{ title: '1003地铁北站A出口', key: '0-1-2', slots: { icon: 'camera' } },
			{ title: '1004地铁北站A出口', key: '0-1-3', slots: { icon: 'camera' } },
			{ title: '1005地铁北站A出口', key: '0-1-4', slots: { icon: 'camera' } },
			{ title: '1006地铁北站A出口', key: '0-1-5', slots: { icon: 'camera' } },
			{ title: '1007地铁北站A出口', key: '0-1-6', slots: { icon: 'camera' } },
			{ title: '1008地铁北站A出口', key: '0-1-7', slots: { icon: 'camera' } },
			{ title: '1009地铁北站A出口', key: '0-1-8', slots: { icon: 'camera' } },
			{ title: '1010地铁北站A出口', key: '0-1-9', slots: { icon: 'camera' } },
			{ title: '1011地铁北站A出口', key: '0-1-10', slots: { icon: 'camera' } },
			{ title: '1012地铁北站A出口', key: '0-1-11', slots: { icon: 'camera' } },
			{ title: '1013地铁北站A出口', key: '0-1-12', slots: { icon: 'camera' } },
			{ title: '1014地铁北站A出口', key: '0-1-13', slots: { icon: 'camera' } },
			{ title: '1015地铁北站A出口', key: '0-1-14', slots: { icon: 'camera' } },
			{ title: '1016地铁北站A出口', key: '0-1-15', slots: { icon: 'camera' } },
			{ title: '1017地铁北站A出口', key: '0-1-16', slots: { icon: 'camera' } },
			{ title: '1018地铁北站A出口', key: '0-1-17', slots: { icon: 'camera' } },
			{ title: '1019地铁北站A出口', key: '0-1-18', slots: { icon: 'camera' } },
			{ title: '1020地铁北站A出口', key: '0-1-19', slots: { icon: 'camera' } },
		],
	},
];
// const dataSource = [
// 	{
// 		"createTime":"2022-04-25T16:42:49.072",
// 		"updateTime":"2022-04-25T16:42:49.072",
// 		"fileLogId":"474597a17ee5e3d918932d1b5de527b1",
// 		"cameraId":"be6faf372f3241cfae0fbd1a5ee6375e",
// 		"cameraName":"1号摄像机",
// 		"taskId":"af5f7b02038e3efb61aed79316a4d10f",
// 		"taskName":"aaa_1号摄像机",
// 		"startDateTime":"2022-04-25 16:42:40",
// 		"endDateTime":"2022-04-25 16:45:35",
// 		"state":"1_2",
// 		"recordUrl":"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-uni4934e7b/c4d93960-5643-11eb-a16f-5b3e54966275.m3u8",
// 		"taskType":"0",
// 		"showDownload":false
// 	},
// 	{
// 		"createTime":"2022-04-25T16:42:36.186",
// 		"updateTime":"2022-04-25T16:42:36.186",
// 		"fileLogId":"f76852db9210d55c6780fc46d1dde7af",
// 		"cameraId":"be6faf372f3241cfae0fbd1a5ee6375e",
// 		"cameraName":"1号摄像机",
// 		"taskId":"ea94dbd97d360bdb040b175108b75196",
// 		"taskName":"ss_1号摄像机",
// 		"startDateTime":"2022-04-25 16:42:32",
// 		"endDateTime":"2022-04-25 16:43:32",
// 		"state":"1_1",
// 		"recordUrl":"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-uni4934e7b/c4d93960-5643-11eb-a16f-5b3e54966275.m3u8",
// 		"taskType":"0",
// 		"showDownload":false
// 	}
// ]
export default {
	name: 'login',
	mixins:[JeecgListMixin],
	components:{
		Player,
		PanTilt,
		Download,
		GridLayout: VueGridLayout.GridLayout,
		GridItem: VueGridLayout.GridItem
	},
	data() {
		return {
			title: '1111',
			model: {},
			
			startValue: moment().subtract(1, 'days'),
			endValue:  moment(),
			endOpen: false,
			
			isFullScreen: false, //多画面全屏到屏幕
			hasFull: false, //是否有单画面全屏到多画面
			urlList_live: [],
			urlList_record: [],
			
			loginTime: moment().format('YYYY-MM-DD HH:mm:ss'),
			// current: ['mail'],
			playMode: 'live',//live直播,record录像
			showFooter: true,//是否显示底边
			showTool: true,//是否显示右边
			showPlayerHeader: true,//是否显示播放器头
			ptzEnable: false,
			showPtz: true,
			selectNum: 0,
			selectItem: null,
			treeData,
			treeDataEL:[],
			disableMixinCreated: true,
			// dataSource,
			// testurl:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-uni4934e7b/c4d93960-5643-11eb-a16f-5b3e54966275.m3u8',
			testurl:'',
			
			layout: [],
			// colNum: 2,
			rowNum: 2,
			layoutWidth: 800,
			layoutHeight: 600,
			rowHeight:30,
			rowWidth:40,
			borderWidth: 2,
			draggable: true,
			resizable: true,
			gridstatic: false,
			preventCollision: false,
			
			// MQTT
			options: {
				// 不关心之前的离线消息
				cleanSession: true,
				// 超时时间
				connectTimeout: 4000,
				// 重连时间间隔
				reconnectPeriod: 4000,
				//多个页面打开时不能重复否则会相互顶掉重复的clentId
				clientId: '',
			},
			connectUrl: `${process.env.VUE_APP_MQTT}`,//ws://test3.iksonya.com:8083/mqtt
			topic: '/pvp/common/msg',
			client: null,
			
			activeKey:['1'],
			areaList:[],
			queryParam: {
				type: 'task',
				cameraName: '',
				taskName: '',
				//platformId: '',
			},
			/* 分页参数 */
			ipagination: {
				current: 1,
				pageSize: 20,
				pageSizeOptions: ['10', '20', '30'],
				showTotal: (total, range) => {
					return range[0] + "-" + range[1] + " 共" + total + "条"
				},
				showQuickJumper: false,
				showSizeChanger: false,
				total: 0
			},
			columns: [
				{
					title: '名称',
					align:"left",
					dataIndex: 'taskName',
					scopedSlots: { customRender: 'taskName' },
				},
				{
					title: '操作',
					dataIndex: 'action',
					align:"center",
					scopedSlots: { customRender: 'action' },
					width: 40,
				}
			],
			// 外域录像
			columns1: [
				{
					title: '名称',
					align:"left",
					dataIndex: 'taskName',
					scopedSlots: { customRender: 'taskName' },
				}
			],
			url: {
				list: "/record/file-log/page",
				delete: "/platform/delete",
				deleteBatch: "/platform/delete-batch"
			},
			debug:false,
		};
	},
	computed: {
		colNum(){
			return this.rowNum;
		},
		urlList(){
			if(this.playMode == 'live'){
				return this.urlList_live;
			}
			else {
				return this.urlList_record;
			}
		},
	},
	watch:{
		rowNum(v,oldval) {
			// console.log('rowNum change',oldval + '->' + v)
			if(this.urlList_live.length < v*v){
				this.getUrlList(this.urlList_live, v*v)
			}
			if(this.urlList_record.length < v*v){
				this.getUrlList(this.urlList_record, v*v)
			}
			this.hasFull = false;
			this.setPlayerResize();
		},
	},
	created() {
		console.log('-------created-------')
		console.log(this.connectUrl);
		// this.urlList = [];
		this.getUrlList(this.urlList_live, this.rowNum * this.rowNum)
		this.getUrlList(this.urlList_record,this.rowNum * this.rowNum)
	},
	methods: {
		moment,
		...mapActions(["Logout"]),
		...mapGetters(["avatar","userInfo", "orgList"]),
		// 选择的域
		chooseArea(){
			if(this.queryParam.regionId){
				return this.areaList.find(area=>area.serverGBId == this.queryParam.regionId) || {};
			}
			return {};
		},
		// 摄像机可用
		cameraEnable(data){
			if(!data)return false;
			return (data.used == '1' || data.used == true) && (data.online == '1' || data.online == true);
		},
		// 云台可用
		getPtzEnable(data){
			if(!data)return false;
			return (data.hasPtz == '1' || data.hasPtz == true)
			&& (data.status == 'online');
		},
		// 快速录像
		quickRecord(record) {
			console.log('快速录像',record)
			record.recordState = 'loading'
			let postData = {
				"recordTaskItems": [
					{
						"name": "快速录像任务_" + record.name,
						"cameraId": record.cameraId
					}
				],
				"taskDesc": "快速录像任务",
				"typeId": "0",
				"used": "1",
				"cameraRegionId": "4401020049"
			}
			addQuickRecord(postData).then(res => {
					if (res.code == '00000') {
						console.log(res.data)
						this.$message.success('设置快速录像完成')
						// record.recordState = true;
						this.initDateTree();
					} else {
						this.$message.warning(res.msg);
					}
				})
		},
		// 录像下载，取消录像下载
		downLoadRecord(record) {
			console.log('download',record);
			// 没下载->去下载
			if(!record.showDownload){
				record.showDownload = true;
			}
			// 下载中->取消下载
			else{
				record.showDownload = false;
			}
		},
		// 日期方法
		disabledStartDate(startValue) {
			const endValue = this.endValue;
			if (!startValue || !endValue) {
				return startValue && startValue > moment().endOf('day');
			}
			return startValue.valueOf() > endValue.valueOf() || startValue && startValue > moment().endOf('day');
		},
		disabledEndDate(endValue) {
			const startValue = this.startValue;
			if (!endValue || !startValue) {
				return endValue && endValue > moment().endOf('day');
			}
			return startValue.valueOf() >= endValue.valueOf() || endValue && endValue > moment().endOf('day');
		},
		handleStartOpenChange(open) {
			if (!open) {
				this.endOpen = true;
			}
		},
		handleEndOpenChange(open) {
			this.endOpen = open;
		},
		// 选择域
		areaChoose(e){
			console.log(this.chooseArea())
			this.dataSource = [];
			this.searchQuery();
		},
		// 查询录像
		// searchQuery() {
			
		// },
		// 查询录像
		searchReset() {
			let type = this.queryParam.type;
			this.queryParam = {}
			if(this.areaList.length > 0){
				this.queryParam.regionId = this.areaList[0].serverGBId;
				// this.queryParam.deviceGBId = this.areaList[0].platformId;
			}
			else{
				this.queryParam.regionId = ""
				// this.queryParam.deviceGBId = ""
			}
			this.queryParam.cameraName = ""
			this.queryParam.taskName = ""
			this.queryParam.type = type
			this.startValue = moment().subtract(1, 'days'),
			this.endValue =  moment(),
			this.loadData(1);
		},
		getQueryParams() {
			//获取查询条件
			console.log('---------getQueryParams--------')
			let sqp = {}
			var param = Object.assign(sqp, this.queryParam, this.filters);
			// param.field = this.getQueryField();
			param.current = this.ipagination.current;
			param.size = this.ipagination.pageSize;
			param.startDateTime = this.startValue.format('YYYY-MM-DD HH:mm:ss')
			param.endDateTime = this.endValue.format('YYYY-MM-DD HH:mm:ss')
			if(param.type == 'camera')param.taskName = '';
			if(param.type == 'task')param.cameraName = '';
			param.regionId = param.regionId || '';
			// param.deviceGBId = param.deviceGBId || '';
			return param;
		},
		// 选择一个播放器
		playerSelected(item,i){
			console.log('playerSelected');
			this.selectItem = item;
			this.selectNum = i;
			this.ptzEnable = this.getPtzEnable(item);
			this.$nextTick(()=>{
				this.$refs.ptz.refreshPtz();
			})
		},
		// 单个播放器的style
		playContainStyle(item,index){
			let x = index % this.rowNum;
			let y = Math.floor(index / this.rowNum);
			let space = this.borderWidth
			let left = space + (this.rowWidth + space) * x;
			let top = space + (this.rowHeight + space) * y;
			if(item.isFull) return 'position: absolute; left:' + space + 'px;top:' + space + 'px;width:calc(100% - ' + (space*2) + 'px);height:calc(100% - ' + (space*2) + 'px);transition: all 0.2s ease 0s;'
			else return 'position: absolute; left:' + left + 'px;top:' + top + 'px;width:' + this.rowWidth + 'px;height:' + this.rowHeight + 'px;transition: all 0.2s ease 0s;'
			
			//return item.isFull ? 'margin:1px;width:calc(100% - 2px);height:calc(100% - 2px);transition: all 0.2s ease 0s;' : 'margin:1px 0 0 1px;width:'+ rowWidth +'px;height:'+ rowHeight +'px;float:left;transition: all 0.2s ease 0s;'
		},
		// 给list，设置初始化数据，应对播放器数量
		getUrlList(list, count){
			let l = list.length;
			if(l < count){
				for (let i=l; i < count; i++) {
					list.push({
						index: i,
						isFull: false,
						hasPtz: false,
						playerHeaderText: '',
						playerStatusText: '',
						cameraId: '',
						platformId: '',
						status:'online',
						urlOption: null}) // http://flv.bdplay.nodemedia.cn/live/bbb.flv
				}
			}
		},
		// 设置tree禁止drop，抓手图标css设置 cursor:move
		handle_node_allow_drop(draggingNode, dropNode, type) {
			return false;
		},
		// 父节点，禁止拖拽，子节点拖拽
		handle_node_allow_drag(draggingNode) {
			// if(this.debug)return !draggingNode.data.children;
			return !draggingNode.data.children && draggingNode.data.used == '1' && draggingNode.data.online == '1';
		},
		// el-tree，拖拽结束
		handle_node_drag_end(node, tagEL, position ,ev) {
			// console.log('drag end', node.data.label, node.data.url, node, ev)
			// console.log('node', node.data.url)
			// console.log('ev', ev.x)
			// console.log('ev', ev.y)
			let playerContain = this.dropedplayer({x:ev.x,y:ev.y});
			if(playerContain){
				let i = playerContain.getAttribute('name');
				// console.log(playerContain)
				// console.log(i)
				
				if(this.urlList.length >= i){
					console.log(node.data)
					// this.urlList[i-1].playerHeaderText = node.data.name;
					if(node.data.cameraId){
						// console.log('直播测试',node.data)
						// let playUrl = 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-uni4934e7b/c4d93960-5643-11eb-a16f-5b3e54966275.m3u8'
						// // this.$refs['player'+i][0].refreshVideoWithUrl(playUrl,'hls',false)
						// this.urlList[i-1].urlOption = {url:playUrl,plugin:'hls',isLive:false};
						// this.urlList[i-1].cameraId = node.data.cameraId;
						// this.urlList[i-1].platformId = node.data.platformId;
						// this.urlList[i-1].playerHeaderText = node.data.name;
						// this.urlList[i-1].hasPtz = node.data.hasPtz;
						// this.urlList[i-1].status = 'online';
						// this.playerSelected(this.urlList[i-1],i);
						
						getAction("/dispatcher/video/single/" + node.data.cameraId).then((res) => {
							if (res.code == "00000") {
								console.log(res.data.webrtc);
								// this.$refs['player'+i][0].refreshVideoWithUrl(res.data.webrtc,'rtc',true)
								this.urlList[i-1].urlOption = {url:res.data.webrtc,plugin:'rtc',isLive:true};
								this.urlList[i-1].cameraId = node.data.cameraId;
								this.urlList[i-1].platformId = node.data.platformId;
								this.urlList[i-1].playerHeaderText = node.data.name;
								this.urlList[i-1].hasPtz = node.data.hasPtz;
								this.urlList[i-1].status = 'online';
								// this.selectNum = i;
								this.playerSelected(this.urlList[i-1],i);
							} else {
								// A0510:编码器服务异常
								// A0509:无可用的编码器通道
								this.$message.warning(res.msg || "获取直播地址错误");
								// this.close(this.modelList);
							}
						})
					}
				}
				else{
					console.log('this.urlList长度错误');
				}
				
			}
			else{
				this.$message.warn('请拖拽到播放器上')
			}
		},
		// demo10
		dropedplayer(mouseXY) {
			// console.log(typeof document.getElementsByClassName('itemcontent'))
			// console.log(document.getElementsByClassName('itemcontent')[0])
			var arr = [...document.getElementsByClassName('playerContain')];
			return arr.find(item => {
				let parentRect = item.getBoundingClientRect();
				return mouseXY.x > parentRect.left && mouseXY.x < parentRect.right && (mouseXY.y > parentRect.top && mouseXY.y < parentRect.bottom);
			});
		},
		// 切换管理端
		toManager(){
			this.$router.push({
				path: "/dashboard/analysis"
			}).catch(() => {
				console.log('登录跳转首页出错,这个错误从哪里来的')
			})
		},
		// 退出
		handleLogout() {
			const that = this
			this.$confirm({
				title: '提示',
				content: '真的要注销登录吗 ?',
				onOk() {
					that.pageLogout()
				},
				onCancel() {
				},
			});
		},
		pageLogout(){
			this.Logout({}).then(() => {
				Vue.ls.remove(USER_INFO)
				eventBus.$emit("logout", 'logout')
				// update-begin author:wangshuai date:20200601 for: 退出登录跳转登录页面
				this.$router.push({ path: '/user/login' });
				// update-end author:wangshuai date:20200601 for: 退出登录跳转登录页面
				//window.location.reload()
			}).catch(err => {
				this.$message.error({
					title: '错误',
					description: err.message
				})
			})
		},
		// 查看录像时获取外站接口
		getAreaList(){
			// console.log('-----------')
			// this.areaList = [{
			// 		name:'area1',
			// 		platformId:'44010200492000000001',
			// 		domainType:'1',//本域
			// 		relation:'0',//未知
			// 		state:'1',//在线
			// 	},
			// 	{
			// 		name:'area2',
			// 		platformId:'44010200492000000002',
			// 		domainType:'2',//外域
			// 		relation:'2',//互联
			// 		state:'1',//下线
			// 	},
			// 	{
			// 		name:'area3',
			// 		platformId:'platformId3',
			// 		domainType:'2',//外域
			// 		relation:'1',//下级
			// 		state:'3',//禁用
			// 	}]
			// this.queryParam.regionId = this.areaList[0].platformId;
			// this.loadData(1)
			
			getPlatformList().then(res => {
				if (res.code == '00000') {
					console.log(res.data)
					// 过滤platformId 不为空
					this.areaList = res.data.filter(item=>{
						return item.platformId;
					});
					console.log(this.areaList)
					// 默认显示第一个域
					if(this.areaList.length > 0){
						this.queryParam.regionId = this.areaList[0].serverGBId;
					}
					this.loadData(1)
				} else {
					this.$message.warning(res.msg);
				}
			})
		},
		// 初始化数据
		initDateTree(){
			if(this.playMode == 'live'){
				// if(this.debug) return;
				
			// 	this.treeDataEL = [
			// 	{
			// 		"domainType":"1",
			// 		"children":[
			// 			{
			// 				"cameraId":"9c780cfbefb84811a884aa8da432bf93",
			// 				"devId":"17c134ea14c64a85a09c79497e903768",
			// 				"devCode":null,
			// 				"devName":null,
			// 				"relationDeviceIndex":1,
			// 				"name":"2号摄像机",
			// 				"cameraDesc":"大马路摄像机",
			// 				"location":"东北大马路",
			// 				"used":"1",
			// 				"online":"1",
			// 				"encodeParam":"1",
			// 				"streamAddr":"rtsp://192.168.3.102/live/test",
			// 				"hasPtz":"0",
			// 				"ptzAddr":"222",
			// 				"ptzProtocolGroup":"ONVIF;GB28181;PELCO-D;PELCO-P",
			// 				"ptzProtocol":"ONVIF",
			// 				"recordState":false,
			// 				"createTime":"2022-04-08 00:00:00",
			// 				"updateTime":"2022-04-20 10:35:21",
			// 				"platformId":"111"
			// 			}
			// 		],
			// 		"label":"本域",
			// 		"state":"1",
			// 		"platformId":"111"
			// 	},
			// 	{
			// 		"domainType":"2",
			// 		"children":[
			// 			{
			// 				"cameraId":"9c780cfbefb84811a884aa8da432bf93",
			// 				"devId":"17c134ea14c64a85a09c79497e903768",
			// 				"devCode":null,
			// 				"devName":null,
			// 				"relationDeviceIndex":1,
			// 				"name":"2号摄像机",
			// 				"cameraDesc":"大马路摄像机",
			// 				"location":"东北大马路",
			// 				"used":"1",
			// 				"online":"1",
			// 				"encodeParam":"1",
			// 				"streamAddr":"rtsp://192.168.3.102/live/test",
			// 				"hasPtz":"1",
			// 				"ptzAddr":"222",
			// 				"ptzProtocolGroup":"ONVIF;GB28181;PELCO-D;PELCO-P",
			// 				"ptzProtocol":"ONVIF",
			// 				"recordState":false,
			// 				"createTime":"2022-04-08 00:00:00",
			// 				"updateTime":"2022-04-20 10:35:21",
			// 				"platformId":"222"
			// 			},
			// 			{
			// 				"cameraId":"9539da942929443b8763cb6efd8504bb",
			// 				"devId":"dc172e99b441494e88e53dddaa94085c",
			// 				"devCode":null,
			// 				"devName":null,
			// 				"relationDeviceIndex":1,
			// 				"name":"摄像机1",
			// 				"cameraDesc":null,
			// 				"location":null,
			// 				"used":"1",
			// 				"online":"1",
			// 				"encodeParam":"",
			// 				"streamAddr":null,
			// 				"hasPtz":"1",
			// 				"ptzAddr":null,
			// 				"ptzProtocolGroup":"ONVIF;GB28181;PELCO-D;PELCO-P",
			// 				"ptzProtocol":"ONVIF",
			// 				"recordState":false,
			// 				"createTime":"2022-05-06 19:09:22",
			// 				"updateTime":"2022-05-06 19:09:22",
			// 				"platformId":"222"
			// 			},
			// 		],
			// 		"label":"外域",
			// 		"state":"1",
			// 		"platformId":"222"
			// 	}
			// ];
				
				// 外域下线或者禁用，不显示摄像机
				getAction("/dev/camera/region-group").then((res) => {
					if (res.code == "00000") {
						res.data.forEach(area =>{
							if(area.domainType == '2' && (area.state == '2' || area.state == '3')){
								area.children = []
							}
						});
						console.log(res.data);
						this.treeDataEL = res.data;
					} else {
						this.$message.warning("获取摄像机列表失败，请重新获取");
						// this.close(this.modelList);
					}
				})
				
			}
			else if(this.playMode == 'record'){
				// !this.debug && this.loadData(1)
				this.getAreaList();
			}
		},
		// 直播，录像切换
		playModeChange(value) {
			this.playMode = value;
			this.initDateTree();
		},
		// 刷新页面布局，计算宽高，播放器宽高
		updateLayoutView(){
			console.log('----------updateLayoutView-----------')
			//设置播放器宽度
			this.$nextTick(() => {
				//监听到事件后执行的业务逻辑
				// console.log('layoutContain nextTick');
				// console.log(this.rowNum,this.colNum)
				// console.log(this.ratio)
				// console.log(this.screenWidth)
				// console.log(this.screenHeight)
				var div = document.getElementById('layoutContain');
				this.layoutWidth = div.getBoundingClientRect().width;
				this.layoutHeight = div.getBoundingClientRect().height;
				this.rowWidth = (this.layoutWidth - this.borderWidth * (this.colNum + 1)) / this.colNum;
				this.rowHeight = (this.layoutHeight - this.borderWidth * (this.rowNum + 1)) / this.rowNum;
				// console.log(this.rowNum)
				console.log(this.layoutWidth)
				console.log(this.layoutHeight)
				console.log(this.rowWidth)
				console.log(this.rowHeight)
				this.checkLayout();
			});
		},
		layoutUpdatedEvent(newLayout){
			// console.log('layoutUpdatedEvent',newLayout)
			this.checkLayout();
		},
		// 刷新this.layout，数据用于排序
		checkLayout(){
			if(!this.layout || this.layout.length == 0){
				return
			}
			this.$nextTick(()=>{
				// console.log('--------checkLayout--------')
				// console.log(this.layout);
				// console.log(this.rowNum,this.colNum);
				let arr = this.layout.filter(item => item.x + item.w > this.colNum || item.y + item.h > this.rowNum );
				// console.log(this.arr)
				arr.forEach(item => {
					let index = this.layout.map(item => item.i).indexOf(item.i);
					this.layout.splice(index, 1);
				})
			});
		},
		// 以下antdv-tree,未使用
		onSelect(selectedKeys, info) {
			console.log('selected', selectedKeys, info);
		},
		onDragEnter(info){
			console.log(info)
		},
		onDragend(info){
			console.log(info)
		},
		onDrop(info){
			console.log(info)
		},
		// 录像拖拽
		recordDragend(e){
			console.log('OnDragend',e)
			let playerContain = this.dropedplayer({x:e.x,y:e.y});
			if(playerContain){
				let i = playerContain.getAttribute('name');
				// console.log(playerContain)
				// console.log(i)
				
				if(this.urlList.length >= i){
					let dragObj = JSON.parse(e.srcElement.getAttribute('record')) || JSON.parse(e.srcElement.parentNode.getAttribute('record'));
					// 标题栏
					this.urlList[i-1].playerHeaderText = dragObj.cameraName + ' / ' + dragObj.taskName + ' / ' + dragObj.startDateTime + ' - ' + dragObj.endDateTime;
					console.log(dragObj.recordUrl)
					// let playUrl = dragObj.recordUrl
					let playUrl = this.debug ? 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-uni4934e7b/c4d93960-5643-11eb-a16f-5b3e54966275.m3u8' : dragObj.recordUrl
					
					console.log(this.chooseArea().domainType)
					console.log(dragObj)
					// 外域
					if(this.chooseArea().domainType != '1'){
						this.playRecord(i,playUrl,'hls',false)
						// let postData = {
						// 	regionId: this.queryParam.regionId,
						// 	cameraId: dragObj.cameraId,
						// 	targetPlayUrl: dragObj.recordUrl,
						// }
						// otheRegionRecordUrl(postData).then(res => {
						// 	if (res.code == '00000') {
						// 		console.log(res.data)
						// 		this.playRecord(i,playUrl,'hls',false)
						// 		// let ret = res.data;
						// 		// this.playRecord(i, ret.url, ret.type, ret.isLive);
						// 	} else {
						// 		this.$message.warning(res.code + res.msg);
						// 	}
						// })
					}
					// 本域
					else{
						this.playRecord(i,playUrl,'hls',false)
					}
				}
				else{
					console.log('this.urlList长度错误');
				}
			}
			else{
				this.$message.warn('请拖拽到播放器上')
			}
		},
		// 播放器播放录像url
		playRecord(i,playUrl,type,isLive){
			// this.$refs['player'+i][0].refreshVideoWithUrl(playUrl,type,isLive)
			this.urlList[i-1].urlOption = {url:playUrl,plugin:type,isLive:isLive};
		},
		//单个播放器停止
		setPlayerClose(index){
			console.log('setPlayerClose',index)
			// if(this.urlList.length > index){
			// 	let item = this.urlList[index]
			// 	item.cameraId = '';
			// 	item.platformId = '';
			// 	item.status = 'online';
			// 	item.playerHeaderText = '';
			// 	console.log(this.urlList)
			// }
			// else{
			// 	console.log('数据错误');
			// }
		},
		//单个播放器全屏到多画面
		setPlayerFullScreen(index){
			console.log('setPlayerFullScreen',index)
			if(this.urlList.length > index){
				let item = this.urlList[index]
				item.isFull = true;
				this.hasFull = true;
				console.log(this.urlList)
			}
			else{
				console.log('数据错误');
			}
		},
		//单个播放器取消全屏
		setPlayerCancelFullScreen(index){
			console.log('setPlayerCancelFullScreen',index)
			if(this.rowNum == 1){
				console.log('1*1屏，不用全屏')
				return;
			}
			if(this.urlList.length > index){
				let item = this.urlList[index]
				item.isFull = false;
				this.hasFull = false;
				console.log(this.urlList)
			}
			else{
				console.log('数据错误');
			}
		},
		// 多画面各个播放器复位
		setPlayerResize(){
			this.urlList.forEach(item=>{
				item.isFull = false;
			})
		},
		allPlayPause(){
			let allPause = this.allPause()
			if(allPause){
				console.log('全体开始播放')
			}
			else{
				console.log('全体暂停播放')
			}
			// 如果全体静音，点击全体开启
			var arr = [...document.getElementsByClassName('playerContain')];
			arr.forEach(item=>{
				let i = item.getAttribute('name');
				let player = this.$refs['player' + i][0];
				// 如果全体静音，点击全体开启, 否则全体静音
				player.videoStart(allPause) ;
			});
		},
		allPause(){
			var arr = [...document.getElementsByClassName('playerContain')];
			let ret = arr.every(item => {
				let i = item.getAttribute('name');
				// console.log(this.$refs['player' + i][0].volumeValue)
				return this.$refs['player' + i][0].playing == false
			});
			return ret;
		},
		allPlayerStop(){
			var arr = [...document.getElementsByClassName('playerContain')];
			arr.forEach(item=>{
				let i = item.getAttribute('name');
				let player = this.$refs['player' + i][0];
				player.videoStop();
			});
		},
		allVolumeControl(){
			let allmute = this.allVolumeMute()
			// 如果全体静音，点击全体开启
			var arr = [...document.getElementsByClassName('playerContain')];
			arr.forEach(item=>{
				let i = item.getAttribute('name');
				let player = this.$refs['player' + i][0];
				// 如果全体静音，点击全体开启, 否则全体静音
				player.volumeValue = allmute ? player.saveVolumeValue : 0 ;
			});
		},
		allVolumeMute(){
			var arr = [...document.getElementsByClassName('playerContain')];
			let ret = arr.every(item => {
				let i = item.getAttribute('name');
				// console.log(this.$refs['player' + i][0].volumeValue)
				return this.$refs['player' + i][0].volumeValue == 0
			});
			return ret;
		},
		// 以下多画面全屏
		// 全屏点击方法
		fullscreenClick(){
			var video = document.getElementById('layoutContain');
			// 退出全屏
			if(this.isFullScreen){
				this.cancelFullscreen()
				this.isFullScreen = false;
				window.onresize = null;
			}
			else{
				this.fullscreen(video)
				this.isFullScreen = true;
				window.onresize = this.onresize;
			}
		},
		// window 监听是否全屏
		onresize() {
			console.log('window.onresize');
			var isFull =
				document.fullscreenElement ||
				document.mozFullScreenElement ||
				document.webkitFullscreenElement
			this.isFullScreen = isFull ? true :false;
			if(this.isFullScreen == false){
				window.onresize = null;
			}
		},
		// 全屏
		fullscreen (element) {
			if (element.requestFullscreen) {
				element.requestFullscreen();
			} else if (element.mozRequestFullScreen) {
				element.mozRequestFullScreen();
			} else if (element.msRequestFullscreen) {
				element.msRequestFullscreen();
			} else if (element.oRequestFullscreen) {
				element.oRequestFullscreen();
			} else if (element.webkitRequestFullscreen) {
				element.webkitRequestFullScreen();
			} else {
				console.log("这是全屏");
			}
		},
		// 退出全屏
		cancelFullscreen () {
			if (document.exitFullscreen) {
				document.exitFullscreen();  
			} else if (document.cancelFullScreen) {
				document.cancelFullScreen();
			} else if (document.mozCancelFullScreen) {
				document.mozCancelFullScreen();
			} else if (document.msCancelFullscreen) {
				document.msCancelFullscreen();
			} else if (document.oCancelFullscreen) {
				document.oCancelFullscreen();
			} else if (document.webkitCancelFullScreen) {
				document.webkitCancelFullScreen();
			} else {
				console.log("请按ESC退出全屏");
			}
		},
		// 创建mqtt连接
		createConnection() {
			console.log(3333)
			console.log(this.options,'=====');
			this.options.clientId = this.userInfo().loginName + '-' +  Math.random().toString(16).substr(2, 8)
			console.log(this.options.clientId,'--------')
			this.client = mqtt.connect(this.connectUrl, this.options)
			//建立连接
			this.client.on('connect', (e) => {
				//订阅主题
				this.client.subscribe(this.topic, {
					qos: 2
				}, (err) => {
					if (!err) {
						console.log('>>>>>>订阅成功',this.options.clientId);
					} else {
						console.log('>>>>>>订阅失败',this.options.clientId);
					}
				})
			})
			// debugger
			//监听接收消息
			// console.log(messageobj.payload)
			this.client.on('message', (topic, message) => {
				console.log(topic,111)
				// console.log(`${message}`)
				console.log(`${message}`)
				let messageobj = JSON.parse(message) || {};
				let type = messageobj.bizType;
				let payload = messageobj.payload;
				if(!payload){
					this.$message.warn('推送消息格式错误，无payload')
				}
				// {"bizType":"forced_user_logout","payload":{"userId":"98ffc763488b452f9677153c6c298685"}}
				// {"bizType":"delete_device","payload":{"cameraId":"9539da942929443b8763cb6efd8504bb","name":"摄像机1"}}
				// {"bizType":"unused_device","payload":{"cameraId":"9539da942929443b8763cb6efd8504bb","name":"摄像机1"}}
				// {"bizType":"unused_camera","payload":{"cameraId":"9539da942929443b8763cb6efd8504bb","name":"摄像机1"}}
				// {"bizType":"offline_device","payload":{"cameraId":"9539da942929443b8763cb6efd8504bb","name":"摄像机1"}}
				// {"bizType":"offline_camera","payload":{"cameraId":"9539da942929443b8763cb6efd8504bb","name":"摄像机1"}}
				// {"bizType":"online_device","payload":{"cameraId":"9539da942929443b8763cb6efd8504bb","name":"摄像机1"}}
				// {"bizType":"online_camera","payload":{"cameraId":"9539da942929443b8763cb6efd8504bb","name":"摄像机1"}}
				// {"bizType":"delete_platform","payload":{"platformId":"222","name":"200下级"}}
				// {"bizType":"unused_platform","payload":{"platformId":"222","name":"200下级"}}
				// {"bizType":"offline_platform","payload":{"platformId":"222","name":"200下级"}}
				// {"bizType":"online_platform","payload":{"platformId":"222","name":"200下级"}}
				
				if(type == 'forced_user_logout') {
					let userId = payload.userId;
					if(userId != this.userInfo().userId){
						console.log('推送的客户id不是当前客户');
						return
					}
					// this.$message.warn('当前用户被管理员强制下线')
					// this.pageLogout()
				}
				else if(type == 'delete_device') {
					if(payload.cameraId){
						this.refreshDevice(payload,'delete')
					}
					// this.$message.warn('当前用户被管理员强制下线')
					// this.pageLogout()
				}
				else if(type == 'unused_device' || type == 'unused_camera') {
					if(payload.cameraId){
						this.refreshDevice(payload,'unused')
					}
					// this.$message.warn('当前用户被管理员强制下线')
					// this.pageLogout()
				}
				else if(type == 'offline_device' || type == 'offline_camera') {
					if(payload.cameraId){
						this.refreshDevice(payload,'offline')
					}
					// this.$message.warn('当前用户被管理员强制下线')
					// this.pageLogout()
				}
				else if(type == 'online_device' || type == 'online_camera') {
					if(payload.cameraId){
						this.refreshDevice(payload,'online')
					}
					// this.$message.warn('当前用户被管理员强制下线')
					// this.pageLogout()
				}
				else if(type == 'delete_platform') {
					// if(payload.platformId){
						this.refreshPlatform(payload,'delete')
					// }
					// this.$message.warn('当前用户被管理员强制下线')
					// this.pageLogout()
				}
				else if(type == 'unused_platform') {
					if(payload.platformId){
						this.refreshPlatform(payload,'unused')
					}
					// this.$message.warn('当前用户被管理员强制下线')
					// this.pageLogout()
				}
				else if(type == 'offline_platform') {
					if(payload.platformId){
						this.refreshPlatform(payload,'offline')
					}
					// this.$message.warn('当前用户被管理员强制下线')
					// this.pageLogout()
				}
				else if(type == 'online_platform') {
					if(payload.platformId){
						this.refreshPlatform(payload,'online')
					}
					// this.$message.warn('当前用户被管理员强制下线')
					// this.pageLogout()
				}
				else if(type == 'record_alarm') {
					console.log('录像报警')
					if(payload.msg){
						this.$message.warn(payload.msg)
					}
					// this.$message.warn('当前用户被管理员强制下线')
					// this.pageLogout()
				}
				else if(type == 'used_device' || type == 'used_camera') {
					console.log('11111')
					if(payload.cameraId){
						this.refreshDevice(payload,'used')
					}
				}
				else{
					console.log('未知消息类型')
				}
			})
		},
		// 树包含摄像机
		treeDataELContainCamera(cameraId) {
			let isFind = false;
			this.treeDataEL.forEach(item => {
				item.children.forEach(cameraItem => {
					if(cameraId == cameraItem.cameraId){
						isFind = true
					}
				})
			})
			return isFind;
		},
		// 树包含域
		treeDataELContainPlatform(platformId) {
			let ret = this.treeDataEL.find(item => item.platformId == platformId)
			return ret ? true : false;
		},
		// mqtt：设备，摄像机处理 ,type: delete , unused, offline ,online
		refreshDevice(payload,type){
			if(this.playMode != 'live'){
				console.log('不是直播页面，不处理相关推送消息');
				return
			}
			if(!(type == 'delete' || type == 'unused' || type == 'offline' || type == 'online' || type == 'used')){
				console.log('推送错误');
				return
			}
			let showtext = '(删除)'
			if(type == 'unused') showtext = '(禁用)'
			if(type == 'used') showtext = '(启用)'
			if(type == 'offline') showtext = '(离线)'
			if(type == 'online') showtext = '(上线)'
			
			// treeDataEL 必须重刷,因为不知道哪些设备启用了
			if(this.treeDataELContainCamera(payload.cameraId)){
				console.log(payload.cameraId,1111)
				console.log('树结构包含该摄像机，重刷')
				this.initDateTree();
				// 弹窗禁用信息
				// this.$notification.success({
				// 	message: '报警',
				// });
				// this.$notification.success(payload.name + showtext)
				this.$message.warn(payload.name + showtext)
			}
			else{
				console.log('树结构不包含该摄像机')
			}
			
			this.urlList.forEach(urlitem => {
				if(urlitem.cameraId == payload.cameraId){
					console.log('设备推送消息-播放器处理')
					urlitem.playerStatusText = type == 'online' ? '' : showtext;
					// urlitem.hasPtz = false
					urlitem.isFull = false
					urlitem.status = type
					let i = parseInt(this.urlList.indexOf(urlitem)) + 1
					let player = this.$refs['player' + i][0];
					if(type == 'delete' || type == 'unused' || type == 'offline' || type == 'used'){
						player.player_destroy();
					}
					else{
						player.videoStart(true);
					}
					// 如果是当前播放设备，云台改变，
					if(this.selectNum == i){
						this.playerSelected(urlitem,i)
					}
				}
			})

		},
		// mqtt：平台处理 ,type: delete , unused, offline ,online
		refreshPlatform(payload,type) {
			if(this.playMode != 'live'){
				console.log('不是直播页面，不处理相关推送消息');
				return
			}
			if(!(type == 'delete' || type == 'unused' || type == 'offline' || type == 'online' || type == 'used')){
				console.log('推送错误');
				return
			}
			let showtext = '(删除)'
			if(type == 'unused') showtext = '(禁用)'
			if(type == 'used') showtext = '(启用)'
			if(type == 'offline') showtext = '(离线)'
			if(type == 'online') showtext = '(上线)'
			// treeDataEL
			if(this.treeDataELContainPlatform(payload.platformId)){
				console.log('树结构包含该域，重刷')
				this.initDateTree();
				// 弹窗禁用信息
				this.$message.warn(payload.name + showtext)
			}
			else{
				console.log('树结构不包含该域')
			}
			
			this.urlList.forEach(urlitem => {
				if(urlitem.platformId == payload.platformId){
					console.log('域推送消息-播放器处理')
					urlitem.playerStatusText = type == 'online' ? '' : showtext;
					// urlitem.hasPtz = false
					urlitem.isFull = false
					urlitem.status = type
					let i = parseInt(this.urlList.indexOf(urlitem)) + 1
					let player = this.$refs['player' + i][0];
					if(type == 'delete' || type == 'unused' || type == 'offline' || type == 'used'){
						player.player_destroy();
					}
					else{
						player.videoStart(true);
					}
					// 如果是当前播放设备，云台改变，
					if(this.selectNum == i){
						this.playerSelected(urlitem,i)
					}
				}
			})
			
		},
		
	},
	mounted() {
		console.log('mounted',this.userInfo());
		this.initDateTree();
		// 监听layoutContain宽高变化
		const _this = this;
		const erd = elementResizeDetectorMaker();
		erd.listenTo(document.getElementById("layoutContain"), element => {
			console.log('layoutContain change');
			_this.$nextTick(()=>{
				_this.updateLayoutView();
			})
		});
		// mqtt
		this.createConnection();
		// 只播放器监听全屏，退出全屏
		eventBus.$on('playerClose',this.setPlayerClose);
		eventBus.$on('playerFull',this.setPlayerFullScreen);
		eventBus.$on('playerCancelFull',this.setPlayerCancelFullScreen);
	},
	beforeDestroy() {
		eventBus.$off('playerClose')
		eventBus.$off('playerFull')
		eventBus.$off('playerCancelFull')
		if(this.client){
			this.client.end();
		}
		
	}
};
</script>


<style lang="less" scoped>
.bg{
	width: 100%;
	height: 100%;
	color: white;
	background-color: #111111;
}
.header{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 80px;
	background-color: #111111;
	border-bottom: 3px solid #bf7732;
}
.logoSection{
	position: relative;
	width: 250px;
	height: 100%;
	float: left;
	.headerLogo{
		background-image: url(img/logo.png);
		background-size: cover;
		position: absolute;
		top: 3px;
		left: 20px;
		width: 250px;
		height: 70px;
		// transform: translate(-50%, -50%);
	}
	.headerTitle{
		position: absolute;
		text-align: left;
		height: 100%;
		margin-left:-60px;
		line-height: 77px;
		left:95px;
		right:0;
		font-size: 36px;
		font-family: "Microsoft YaHei";
	}
}
.menuSection{
	position: relative;
	// width: 800px;
	height: 100%;
	margin-left: 10px;
	padding-top: 22px;
	float: left;
}
.ant-btn-primary {
	color: #fff;
	background-color: #111111;
	border-color: transparent;
	text-shadow: 0 -1px 0 rgb(0 0 0 / 12%);
	box-shadow: 0 2px 0 rgb(0 0 0 / 5%);
}
.btnSelected{
	color: #bf7732;
}
.ant-btn{
	font-size: 18px;
}
.systemConfig{
	position: relative;
	// width: 800px;
	height: 100%;
	margin-right: 20px;
	padding-top: 22px;
	float: right;
}
.iconContain{
	float: left;
	margin-left: 5px;
	height: 27px;
	width: 27px;
	cursor:pointer;
}
.iconsize{
	font-size: 20px;
}
.grid1{
	background: url(img/grid1.png) no-repeat 50% 50%; 
}
.grid2{
	background: url(img/grid2.png) no-repeat 50% 50%; 
}
.grid3{
	background: url(img/grid3.png) no-repeat 50% 50%; 
}
.playerplay{
	background: url(img/smallplay.png) no-repeat 50% 50%; 
	background-size: cover;
}
.playerpause{
	background: url(img/smallpause.png) no-repeat 50% 50%; 
	background-size: cover;
}
.playerstop{
	background: url(img/smallstop.png) no-repeat 50% 50%; 
	background-size: cover;
}
.unmutevolume{
	background: url(img/unmutevolume.png) no-repeat 50% 50%; 
	background-size: cover;
}
.mutevolume{
	background: url(img/volumemute.png) no-repeat 50% 50%; 
	background-size: cover;
}
.mulifull{
	background: url(img/fullscreen.png) no-repeat 50% 50%; 
	background-size: cover;
}
.logout_title {
	color: white;
	text-decoration: none;
}
.center{
	position: absolute;
	top: 80px;
	bottom: 30px;
	left: 0;
	right: 0;
	background-color: #111111;
	// .showArea{
		
	// }
	// .tool{
	// 	position: absolute;
	// 	width: 280px;
	// 	height: 100%;
	// 	right: 0;
	// 	background-color: red;
	// }
}
.platicon{
	position: absolute;
	right: 0px;
	width: 50px;
	height: 36px;
	line-height: 36px;
	margin-top: 0;
	cursor: pointer;
}
.footer{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 28px;
	background-color: #262d33;
	color: white;
	line-height: 28px;
}
.btn{
	position: relative;
	float: left;
	width: 84px;
	height:50px;
	margin: 2px;
	color: white;
	line-height: 46px;
	text-align: center;
	background-color: #1b1e23;
	border: 2px solid #383d41;
	font-size: 16px;
	cursor:pointer;
}
.btn[disabled]{
	filter: brightness(0.6);
}
.btn:not([disabled]):hover{
	background-color: #3d4248;
}
.btn:not([disabled]):active{
	background-color: #111111;
}
.playerHeader{
	width: 100%;
	height: 20px;
	padding-left: 10px;
	background-color: #252f2e;
	border-bottom: 1px solid #383d41;
}
</style>
<style lang="scss" scoped>
	// /deep/ .ant-slider{
	// 	width: 100%;
	// 	left: 0;
	// 	margin-left: 0px;
	// 	margin-right: 0px;
	// 	position: absolute;
	// 	z-index: 1;
	// }
	// /deep/ .ant-slider .ant-slider-track{
	// 	background-color: #0a69bf;
	// }
	// /deep/ .ant-slider .ant-slider-rail{
	// 	background-color: rgba(255, 255, 255,0.15);
	// }
	
	// /deep/ .ant-modal-content {
	// 	background-color: blue;
	// }
	
/deep/ .ant-select-dropdown{
	background-color: #383d41;//tudo
}
/deep/ .ant-select-selection--single {
	height: 28px;
	color: white;
}
/deep/ .ant-select-open .ant-select-selection,
/deep/ .ant-select-enabled .ant-select-selection,
/deep/ .ant-select-selection:hover{
	border: 1px solid #d9d9d9;
}

/deep/ .ant-select-selection {
	background-color: transparent;
	border: 1px solid #d9d9d9;
}

/deep/ .ant-tree{
	overflow-y: auto;
	height: 100%;
	color: white;
}
/deep/ .ant-tree li .ant-tree-node-content-wrapper{
	color: white;
}
/deep/ .ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected,
/deep/ .ant-tree li .ant-tree-node-content-wrapper:hover{
	background-color: #737373;
}

/deep/ .el-tree {
	background: transparent;
	color: #dddddd;
	overflow-y: auto;
}
/*鼠标移动到*/
/deep/ .el-tree-node__content:hover {
  background-color: transparent;
  color: #6d6d72;
}
/*点击*/
/deep/ .el-tree-node:focus>.el-tree-node__content {
  background-color: #3d4148;
}
/*选中*/
/deep/ .el-tree-node.is-current > .el-tree-node__content {
  background-color: #3d4148 !important;
}
/* 设置节点鼠标悬浮三角图标鼠标悬浮的颜色 */
/deep/ .el-tree-node__content:hover .el-tree-node__expand-icon {
  color: #6d6d72;
}
/deep/ .el-tree.is-dragging.is-drop-not-allow .el-tree-node__content{
	cursor:move
}

/deep/ .ant-collapse-borderless,
/deep/ .ant-input{
	background-color: transparent;
	color: #dddddd;
}
/deep/ .ant-input:hover,
/deep/ .ant-input:focus{
	// border: 1px solid #bf7732;
}
/deep/ .ant-collapse > .ant-collapse-item > .ant-collapse-header,
/deep/ .ant-collapse-content,
/deep/ .ant-form-item-label > label {
	color: white;
}
/deep/ .ant-collapse-borderless > .ant-collapse-item {
	// border-bottom: 1px solid #383d41;
}
/deep/ .ant-row.ant-form-item{
	width: 100%;
}
/deep/ .ant-radio-button-wrapper{
	width: 75px;
	text-align: center;
	background: transparent;
	color:white;
}
/deep/ .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled),
{
	background: transparent;
	color:#1890FF;
	// color:#bf7732;
	// border-color: #bf7732;
	// box-shadow: -1px 0 0 0 #bf7732;
}
/deep/ .ant-collapse-borderless > .ant-collapse-item > .ant-collapse-content > .ant-collapse-content-box,
/deep/ .ant-table-small > .ant-table-content > .ant-table-body > table > .ant-table-thead > tr > th{
	padding: 4px;
}

/deep/ .ant-table,
/deep/ .ant-table-thead > tr > th,
/deep/ .ant-pagination,
/deep/ .ant-select-dropdown-menu-item,
/deep/ .ant-select-dropdown-menu-item-selected,
/deep/ .ant-pagination-item a,
/deep/ .ant-empty-normal
{
	color: #dddddd;
}
/deep/ .ant-select-dropdown-menu-item:hover,
/deep/ .ant-select-dropdown-menu-item-active,
/deep/ .ant-select-dropdown-menu-item-selected
{
	background-color: #222222;
}
/deep/ .ant-table-small{
	border-width: 0;
}

/deep/ .ant-table-row{
	border-top: 2px solid transparent;
}
// /deep/ .ant-table-row:hover,
// /deep/ table:hover,
// /deep/ tr:hover,
// /deep/ thead:hover{
// 	background: red;
// }
// 表格选中状态
/deep/ .ant-table-row:hover > td{
	background: rgba(255, 255, 255, 0.15) !important;
}

/deep/ .ant-table table{
	border-collapse: collapse;
}
/deep/ .ant-pagination-item-active,
/deep/ .ant-table-placeholder{
	background-color: transparent;
}
/deep/ .ant-table-small > .ant-table-content > .ant-table-body > table > .ant-table-tbody > tr > td, {
	padding: 4px;
}


</style>
<style lang="less">
body{
	// background-color: yellow;
	overflow-y: auto;
}
.ant-dropdown-menu-dark .ant-dropdown-menu-submenu-title span,
.ant-dropdown-menu-dark .ant-dropdown-menu-item,
.ant-dropdown-menu-dark .ant-dropdown-menu-item-group-title{
	color:white;
}
.ant-dropdown-menu-dark, 
.ant-dropdown-menu-dark ul.ant-dropdown-menu {
	background: #383d41;
}

</style>